<template>
  <div class="department-container">
    <div class="app-container">
      <page-tools>
        <template v-slot:left>
          当前页面数据有{{ total }}条
        </template>
        <template #right>
          <!-- 插槽:往子组件里面 传递 html结构 -->
          <!-- props是往子组件里面传递数据 -->
          <div>
            <el-button type="primary" @click="$router.push('/import')">导入excel</el-button>
            <el-button type="success" @click="exportExcel">导出excel</el-button>
            <el-button type="primary" @click="addRoleBtn">主要按钮</el-button>
          </div>
        </template>
      </page-tools>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="username"
          label="姓名"
          width="110"
          align="center"
        />
        <el-table-column
          prop="workNumber"
          label="工号"
          width="110"
          align="center"
        />
        <el-table-column
          prop="formOfEmployment"
          label="聘用形式"
          width="110"
          align="center"
        >
          <template slot-scope="scope">
            <div @click="fn(scope)">{{ transformHireType(scope.row.formOfEmployment) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentName"
          label="部门"
          width="180"
          align="center"
        />

        <el-table-column
          prop="staffPhoto"
          label="照片"
          width="180"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-avatar :size="80" :src="row.staffPhoto" />
            <!-- <img :src="row.staffPhoto" alt=""> -->
          </template>
        </el-table-column>
        <el-table-column
          prop="timeOfEntry"
          label="入职时间"
          width="180"
          align="center"
          sortable
          :default-sort="{prop:'timeOfEntry',order:'ascending'}"
        />
        <el-table-column
          prop="mobile"
          label="电话号码"
          width="180"
          align="center"
        />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="success" @click="$router.push(`/employees/detail?id=${scope.row.id}`)">查看</el-button>
            <el-button size="small" type="primary" @click="edit(scope.row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="hDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="pageInfo.page"
        :page-sizes="[5, 10]"
        :page-size="pageInfo.size"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      v-if="dialogVisible"
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <dialog-form :dialog-visible.sync="dialogVisible" @upDate="upDate" />
    </el-dialog>
    <!-- 给当前角色分配页面 -->
    <el-dialog
      title="分配角色"
      :visible.sync="roleDialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <AssignRole
        v-if="roleDialogVisible"
        :current-id="currentId"
        @close="roleDialogVisible=false"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getUserListRequest, delEmployee } from '@/api/employees'
import globalConstant from '@/constant/employees'
import DialogForm from './Dialog Form.vue'
import { transformZhCNToEn } from '@/utils'
import AssignRole from './AssignRole.vue'

// 第一张方法:数组查找法
// function test(id) {
//   // 数组里面查找元素  find
//   const item = globalConstant.hireType.find(item => item.id === id)
//   if (item) {
//     return item.value
//   } else {
//     return '临时工'
//   }
// }
// console.log(test(2333))

// 第二种： 对象取值法 （核心就是将数组转换为对象）
function test2(id) {
  const obj = {}
  globalConstant.hireType.forEach(item => {
    // item={id:1,value:'正式'}
    obj[item.id] = item.value
    // 不要使用obj.1 只能obj.name 原因就是对象的key只能使用字符串
    // obj['1']
    console.log(obj)
  })

  return obj[id] ? obj[id] : '临时工'
}
console.log(test2(1))
export default {
  name: 'VueHr85Index',
  components: { DialogForm, AssignRole },
  data() {
    return {
      tableData: [],
      pageInfo: {
        page: 1,
        size: 10
      },
      total: 0,
      dialogVisible: false,
      roleDialogVisible: false,
      currentId: ''
    }
  },
  created() {
    this.getUserList()
  },
  // 获取员工列表
  methods: {
    edit(id) {
      this.roleDialogVisible = true
      this.currentId = id
    },
    hDel(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delEmployee(id)
        console.log(res)
        if (res.success) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getUserList()
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    upDate() {
      this.getUserList()
      this.dialogVisible = false
      this.$message.success('添加成功')
    },
    addRoleBtn() {
      this.dialogVisible = true
    },
    async getUserList() {
      try {
        const res = await getUserListRequest(this.pageInfo)
        console.log(res)
        if (res.success) {
          this.total = res.data.total
          this.tableData = res.data.rows
        }
      } catch (error) {
        this.$message.error('获取员工列表失败')
      }
    },
    handleSizeChange() {},
    handleCurrentChange(value) {
      // 参数就是当前页码值
      console.log(value)
      // 在js里面 将数据page的值 手动赋值为 当前最新的页码值,再发请求
      this.pageInfo.page = value
      this.getUserList()
    },
    transformHireType(id) {
      // const item = globalConstant.hireType.find(item => item.id === id)
      // if (item) {
      //   return item.value
      // } else {
      //   return '临时工'
      // }
      const obj = {}
      globalConstant.hireType.forEach(item => {
        obj[item.id] = item.value
      })
      return obj[id] ? obj[id] : '临时工'
    },
    // 导出excal的方法
    exportExcel() {
      import('@/vendor/Export2Excel').then(excel => {
        const { header, data } = transformZhCNToEn(this.tableData)
        excel.export_json_to_excel({
          header,
          data,
          filename: '导出文件的名称',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    }
  }
}
</script>
